<script setup>
//引入
import { onMounted, reactive } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'

// const map = ref(null)
const emit = defineEmits(['getLglat'])
const mapData = reactive({
  map: {},
  keyword: '',
  selectedLocation: {},
  selectedAddress: ''
})
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: 'c1d8609e8cd5daba4d386f5ab3510e2b' // 密钥
  }
  AMapLoader.load({
    key: 'cd228b6928a6deaa95cfed86ab75f3af', //key值
    version: '1.4.15',
    plugins: ['AMap.PlaceSearch']
  })
    .then((AMap) => {
      const mapInstance = new AMap.Map('container', {
        viewMode: '2D',
        zoom: 11,
        center: [113.984358, 35.288668],
        layers: [new AMap.TileLayer.Satellite(), new AMap.TileLayer.RoadNet()]
      })
      mapInstance.on('click', (e) => {
        //点击位置获取经纬度
        const lng = e.lnglat.getLng()
        const lat = e.lnglat.getLat()
        // 触发父组件传递的回调函数
        // this.$emit('map-click', lng, lat);
        // emit('getLglat', lng, lat)

        // 传递给父组件
        emit('getLglat', lng, lat)

        ElMessage.success(`经纬度：${lng}, ${lat}`)

        console.log(lng, lat)
      })

      mapData.map = mapInstance
    })
    .catch((e) => {
      console.log(e)
    })
})
const search = () => {
  console.log(mapData.keyword)
  if (mapData.keyword) {
    AMapLoader.load({
      key: 'cd228b6928a6deaa95cfed86ab75f3af', //key值
      version: '1.4.15',
      plugins: ['AMap.PlaceSearch']
    })
      .then((AMap) => {
        const placeSearch = new AMap.PlaceSearch({
          city: '',
          map: mapData.map
        })
        console.log(mapData.keyword)
        placeSearch.search(mapData.keyword, (status, result) => {
          console.log(status, result.info)
          if (status === 'complete' && result.info === 'OK') {
            const pois = result.poiList.pois
            if (pois.length > 0) {
              const { location } = pois[0]
              mapData.map.setCenter(location)
            }
          } else {
            ElMessage.error('搜索失败或无结果')

            console.log('搜索失败或无结果')
          }
        })
      })
      .catch((e) => {
        console.log(e)
      })
  }
}
</script>
<template>
  <div>
    <div
      id="map-container"
      style="position: relative; width: 780px; height: 280px; margin-top: 20px"
    >
      <div
        id="controls"
        style="
          position: absolute;
          top: 10px;
          left: 10px;
          display: flex;
          align-items: center;
          z-index: 1000;
        "
      >
        <input
          class="keyword"
          id="keyword"
          placeholder="请输入搜索位置"
          style="height: 30px; margin-right: 10px"
          autocomplete="off"
          v-model="mapData.keyword"
          @keydown.enter="search"
        />
        <el-button
          type="primary"
          id="searchButton"
          style="height: 30px"
          @click="search"
        >
          获取定位
        </el-button>
      </div>
      <div id="container" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
#map-container {
  position: relative;
  width: 800px;
  height: 300px;
}

#controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

.keyword {
  height: 30px;
  margin-right: 10px;
}

#searchButton {
  height: 30px;
}

#container {
  width: 100%;
  height: 100%;
}
</style>
